<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false" shadow>
                <p slot="title">
                    <img v-if="logo" :src="logo" alt="" style="width: 144px; height: 48px;">
                    <span>商户后台登录</span>
                    <b></b>
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <Input v-model="form.userName" placeholder="请输入用户名">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password" class="password">
                            <Input type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="checkBox" class="checkbox">
                            <Checkbox v-model="checked">记住密码</Checkbox>
                        </FormItem>
                        <FormItem>
                            <Button @click="handleSubmit" type="primary" long :loading="login">登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
            <div class="border-img"><img src="./../images/border-img.png"></div>
            <p class="login-tip"> 山西微特汇信息科技有限公司  晋ICP备17002661号  电话：0350-8556666  周一至周日（9：00-22：00）</p>
        </div>

    </div>
</template>

<script>
import Cookies from 'js-cookie';
import { login } from '@/api/login'
import Util from '../libs/util';

export default {
    data () {
        return {
            login: false,
            form: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            },
            checked: false,
            logo: ''
        };
    },
    methods: {
        handleSubmit () {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.login = true
                    this.$store.dispatch('loging', this.form).then(() => {
                        if (this.checked) {
                            Cookies.set('merchant_password',this.form.password, { expires: 7 })
                        }
                        this.login = false
                        this.$router.push({ name: 'home_index' })
                    }).catch((error) => {
                        this.login = false
                    })
                }
            });
        }
    },
    mounted() {
        this.form.userName = Cookies.get('merchant_user')
        this.form.password = Cookies.get('merchant_password')
        this.$store.dispatch('GetAgentInfo', Cookies.get('merchant_id') === undefined ? '' : Cookies.get('merchant_id')).then(response => {
          if (response.data.errorCode === 0) {
            this.logo = response.data.result.company_logo
            Util.title = response.data.result.company_name
          }
        }).catch(error => {
          console.log(error)
        })
    }
};
</script>
